When using Publish, all tags with same color are boring. Here is a plugin that automatically assign tags with different CSS classes and you can assign different colors to them.

ColorfulTags Plugin for Publish

A plugin for making tags have different colors when using Publish.

Installation

Add ColorfulTagsPublishPlugin to your package.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
let package = Package(
    ...
    dependencies: [
    .package(url: "https://github.com/Ze0nC/ColorfulTagsPublishPlugin", .branch("master"))
    ],
    targets: [
        .target(
            ...
            dependencies: [
                ...
                "ColorfulTagsPublishPlugin"
            ]
        )
    ]
    ...
)

Usage

1. Add the plugin to your build pipeline (after your Markdown files are processed, before HTML files are generated).

1
2
3
4
5
6
7
8
9
import ColorfulTagsPublishPlugin
...
try MyWebsite().publish(using: [
    .addMarkdownFiles(),
    .installPlugin(.colorfulTags(defaultClass: "tag", variantPrefix: "variant", numberOfVariants: 8)),
    ...
    .generateHTML(withTheme: .foundation),
    ...
])

This plugin takes 3 parameters. They are:

• defaultClass: String The default class name of tags in HTML. It is "tag" in Foundation theme.
• variantPrefix: String The variant class name prefix in your CSS file. In the above case, the generated class names will be variant-0, variant-1, etc.
• numberOfVariants: Int The number of variant classes in your CSS file.

1. Modify the codes that produce HTML of tag list in your theme file. In the case of Foundation theme:

Change:

1
2
3
    ...
    .class("tag"),
    ...

To:

1
2
3
    ...
    .class(tag.colorfiedClass),
    ...

You might need to modify more than one places.

If the original theme doesn’t specify class with .class("tag"), please add .class(tag.colorfiedClass) by your own.

1. Add background-color of variant classes in your CSS file. Example:

1
2
3
4
5
6
7
8
.variant-0 {background-color: #66293c;}
.variant-1 {background-color: #913e37;}
.variant-2 {background-color: #ca7618;}
.variant-3 {background-color: #a38138;}
.variant-4 {background-color: #2f7176;}
.variant-5 {background-color: #246089;}
.variant-6 {background-color: #498840;}
.variant-7 {background-color: #484781;}

In the above example, variantPrefix is "variant" and numberOfVariants is 8.

Acknowledgement

Thanks to John Sundell (@johnsundell) for creating Publish

License

MIT License